import 'package:cher_flare/utils/app_color.dart';
import 'package:cher_flare/utils/utils.dart';
import 'package:flutter/material.dart';

class LYPersonalCenterMedalPage extends StatefulWidget {
  const LYPersonalCenterMedalPage({super.key});

  @override
  State<LYPersonalCenterMedalPage> createState() =>
      _LYPersonalCenterMedalPageState();
}

class _LYPersonalCenterMedalPageState extends State<LYPersonalCenterMedalPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Utils.commonAppBar(title: ''),
      backgroundColor: AppColors.whiteColor,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            padding:
                const EdgeInsets.only(left: 15, right: 15, top: 32, bottom: 32),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                _makeItem('medal_seed_0.png'),
                const SizedBox(
                  width: 24,
                ),
                _makeItem('medal_sapling_0.png'),
                const SizedBox(
                  width: 24,
                ),
                _makeItem('medal_bloom_0.png'),
                const SizedBox(
                  width: 24,
                ),
                _makeItem('medal_gains_0.png')
              ],
            ),
          ),
          Expanded(
            child: Container(
              padding: const EdgeInsets.only(left: 15, right: 15, top: 32),
              decoration: const BoxDecoration(
                  color: AppColors.colorEEFDEF,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(50),
                      topRight: Radius.circular(50))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _makeItem('medal_seed_1.png'),
                  const SizedBox(
                    width: 24,
                  ),
                  _makeItem('medal_sapling_1.png'),
                  const SizedBox(
                    width: 24,
                  ),
                  _makeItem('medal_bloom_1.png'),
                  const SizedBox(
                    width: 24,
                  ),
                  _makeItem('medal_gains_1.png'),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _makeItem(String imgName) {
    return Container(
      width: 68,
      height: 68,
      alignment: Alignment.center,
      child: Image.asset(
        'assets/images/$imgName',
      ),
    );
  }
}
